<template>
  <div class="river">
    <div class="river_top">
      <div class="river_top_text">河道三期勘界</div>
    </div>
    <div class="river_button">
      <div class="river_button_one">
        <div class="river_button_title">河岸线</div>
        <el-switch
          v-model="switchValue1"
          active-color="#409EFF"
          inactive-color="#d1d1d1"
          @change="switchChange1"
          :disabled="isdisabled"
        >
        </el-switch>
      </div>
      <div class="river_button_two">
        <div class="river_button_title">
          河道管理范围
        </div>
        <el-switch
          v-model="switchValue2"
          active-color="#409EFF"
          inactive-color="#d1d1d1"
          @change="switchChange2"
          :disabled="isdisabled"
        >
        </el-switch>
      </div>
    </div>
    <div class="river_bottom">
      <div class="river_bottom_button" v-if="riverData[2].value">
        <div
          class="river_bottom_button_image"
          v-for="(item, index) in riverData"
          :key="index"
        >
          <div
            class="river_bottom_content"
            @click="box_blockClick(item.name)"
            v-if="item.value"
            :style="{
              background:
                boxBlockItem == item.name
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="river_bottom_contnet_top">
              {{ item.name }}
            </div>
            <div class="river_bottom_contnet_bottom">
              <!-- {{ item.value }} -->
              {{
                item.name === "河道总体长度"
                  ? item.value.toFixed(1)
                  : item.value.toFixed(3)
              }}
              {{ item.name === "河道总体长度" ? "米" : "公顷" }}
            </div>
            <!-- <div v-else class="river_bottom_contnet_bottom">
              {{ item.value }} 公顷
            </div> -->
          </div>
          <!-- <div v-else class="river_bottom_content">
            <div class="river_bottom_contnet_top">{{ item.name }}</div>
            <div class="river_bottom_contnet_bottom">暂无数据</div>
          </div> -->
        </div>

        <!-- <div class="river_bottom_button_image">
          <div
            class="river_bottom_content"
            @click="box_blockClick(1)"
            :style="{
              background:
                boxBlockItem == 1
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="river_bottom_contnet_top">
              河道总体范围
            </div>
            <div class="river_bottom_contnet_bottom">
              1203.912 公顷
            </div>
          </div>
        </div>

        <div class="river_bottom_button_image">
          <div
            class="river_bottom_content"
            @click="box_blockClick(2)"
            :style="{
              background:
                boxBlockItem == 2
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="river_bottom_contnet_top">
              河道总体管理范围
            </div>
            <div class="river_bottom_contnet_bottom">
              12.039 公顷
            </div>
          </div>
        </div> -->
      </div>
      <div v-else class="river_bottom_content_else">
        <div class="river_bottom_contnet_bottom_else">选址不涉及河道三期勘界</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getXzRegion } from "../../../../../api/connect.js";
import tableNames from "../../left/tableNames.json";
import { editMap } from "../../../../../utils/map.js";

export default {
  data() {
    return {
      // switch的值
      switchValue1: false, // 河岸线
      switchValue2: false, // 河道管理范围

      isdisabled: false, //是否禁用
      // 河道三期勘测图层的loading
      // 河岸线
      haxLoading: false,
      // 河道管理范围
      hdglfwLoading: false,

      boxBlockItem: "河道总体长度",
      riverData: [
        {
          name: "河道总体长度",
          value: 0,
        },
        {
          name: "河道总体范围",
          value: 0,
        },
        {
          name: "河道总体管理范围",
          value: 0,
        },
      ],
    };
  },
  mounted() {
    this.getHdsqAll();
  },
  computed: {
    ...mapState("Sjsx", ["hdsqData", "isRegion"]),
  },
  methods: {
    ...mapActions({
      setHaxLoading_act: "Sjsx/setHaxLoading_act",
      setHdglfwLoading_act: "Sjsx/setHdglfwLoading_act",
    }),
    box_blockClick(val) {
      this.boxBlockItem = val;
      console.log(this.boxBlockItem, "boxBlockItem的值");
    },

    // 获取河道三期勘界总的数据
    getHdsqAll() {
      console.log(this.hdsqData, "河道三期勘界的数据(分析统计)");
      this.hdsqData.forEach((item) => {
        this.riverData[0].value += Number(item.len);
        this.riverData[1].value += Number(item.ha);
        this.riverData[2].value += Number(item.haManage);
      });
    },

    // 点击后画面 （河岸线）
    async getRegionDataOne() {
      try {
        const temp = tableNames.find((r) => r.layer_chinese_name === "河岸线");
        if (this.switchValue1 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];
          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色

              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            polygondata.push(o);
            itemJson.geometry.coordinates &&
              itemJson.geometry.coordinates.forEach((item) => {
                // console.log(item, "item");
                if (
                  item instanceof Array &&
                  item[0] instanceof Array &&
                  item[0][0] instanceof Array
                ) {
                  item.forEach((mon) => {
                    polylinedata.push({
                      id: "polyline_" + temp.layer_english_name + "_" + index,
                      coordinates: mon, //构成折线的坐标点数组
                      color: [1, 1, 1, 1], //折线颜色
                      style: 0, //折线样式 参考样式枚举：PolylineStyle
                      thickness: 5, //折线宽度
                      intensity: 1, //亮度
                      flowRate: 0.5, //流速
                      tiling: 0, //材质贴图平铺比例
                      shape: 0, //折线类型 0：直线， 1：曲线
                      depthTest: false, //是否做深度检测
                      coordinateType: 0,
                    });
                  });
                } else {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: item, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                }
              });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(
          //     itemJson.geometry.coordinates,
          //     "itemJson.geometry.coordinates"
          //   );

          //   let o = {
          //     id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1, 1, 1, 0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });
          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.haxLoading = false;
          this.setHaxLoading_act(this.haxLoading);
          // this.$store.dispatch("Sjsx/setCbtdLoading_act", this.cbtdLoading);

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue1 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue1 = false; //请求失败后，将switch框设置为false
        this.haxLoading = false;
        this.setHaxLoading_act(this.haxLoading); // 请求失败后，将loading窗关闭
      }
    },

    // 点击后画面 （河道管理范围）
    async getRegionDataTwo() {
      try {
        const temp = tableNames.find(
          (r) => r.layer_chinese_name === "河道管理范围"
        );
        if (this.switchValue2 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];
          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色

              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            polygondata.push(o);
            itemJson.geometry.coordinates &&
              itemJson.geometry.coordinates.forEach((item) => {
                // console.log(item, "item");
                if (
                  item instanceof Array &&
                  item[0] instanceof Array &&
                  item[0][0] instanceof Array
                ) {
                  item.forEach((mon) => {
                    polylinedata.push({
                      id: "polyline_" + temp.layer_english_name + "_" + index,
                      coordinates: mon, //构成折线的坐标点数组
                      color: [1, 1, 1, 1], //折线颜色
                      style: 0, //折线样式 参考样式枚举：PolylineStyle
                      thickness: 5, //折线宽度
                      intensity: 1, //亮度
                      flowRate: 0.5, //流速
                      tiling: 0, //材质贴图平铺比例
                      shape: 0, //折线类型 0：直线， 1：曲线
                      depthTest: false, //是否做深度检测
                      coordinateType: 0,
                    });
                  });
                } else {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: item, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                }
              });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(
          //     itemJson.geometry.coordinates,
          //     "itemJson.geometry.coordinates"
          //   );

          //   let o = {
          //     id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1, 1, 1, 0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });
          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.hdglfwLoading = false;
          this.setHdglfwLoading_act(this.hdglfwLoading);
          // this.$store.dispatch("Sjsx/setYqxyfwLoading_act", this.yqxyfwLoading);

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue2 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue2 = false; //请求失败后，将switch框设置为false
        this.hdglfwLoading = false;
        this.setHdglfwLoading_act(this.hdglfwLoading); // 请求失败后，将loading窗关闭
      }
    },

    // switch的改变(河岸线)
    async switchChange1(val) {
      console.log(val, "switch1改变");
      this.isdisabled = true;

      // this.switchValue1 = val;
      if (val) {
        if (this.riverData[2].value) {
          this.haxLoading = true;
          this.setHaxLoading_act(this.haxLoading);
          // this.$store.dispatch("Sjsx/setCbtdLoading_act", this.cbtdLoading);
          await this.getRegionDataOne();
          // this.cbtdLoading = false;
          // this.$store.dispatch("Sjsx/setCbtdLoading_act", this.cbtdLoading);
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue1 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataOne();
      }
      this.isdisabled = false;
    },

    // switch的改变(河道管理范围)
    async switchChange2(val) {
      console.log(val, "switch2改变");
      this.isdisabled = true;
      // this.switchValue2 = val;
      if (val) {
        if (this.riverData[2].value) {
          this.hdglfwLoading = true;
          this.setHdglfwLoading_act(this.hdglfwLoading);
          // this.$store.dispatch("Sjsx/setYqxyfwLoading_act", this.yqxyfwLoading);
          await this.getRegionDataTwo();
          // this.yqxyfwLoading = false;
          // this.$store.dispatch("Sjsx/setYqxyfwLoading_act", this.yqxyfwLoading);
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue2 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataTwo();
      }
      this.isdisabled = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.river {
  margin-top: 25px;
  .river_top {
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .river_top_text {
      font-size: 20px;
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      line-height: 24px;
      color: #ffffff;
    }
  }
  .river_button {
    display: flex;
    margin-left: 10px;
    margin-top: 15px;
    .river_button_one {
      display: flex;
      align-items: center;
      margin-right: 130px;
    }
    .river_button_two {
      display: flex;
      align-items: center;
    }
    .river_button_title {
      margin-right: 8px;
    }
  }
  .river_bottom {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .river_bottom_button {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      width: 420px;
      flex-wrap: wrap;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .river_bottom_button_image {
        width: 254px;
        height: 85px;
        margin-bottom: 15px;
        .river_bottom_content {
          width: 254px;
          height: 85px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 4px;
          cursor: pointer;
          margin-bottom: 15px;
          .river_bottom_contnet_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.85);
            display: flex;
            align-items: center;
            // justify-content: center;
            padding-left: 20px;
          }
          .river_bottom_contnet_bottom {
            padding-top: 5px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            color: #83fae5;
            padding-left: 20px;
          }
        }
      }
    }
    .river_bottom_content_else {
      width: 430px;
      height: 100px;
      background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      .river_bottom_contnet_bottom_else {
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}
</style>
